<template>
  <div class="tw-libselect">
    <el-select
      :class="`xselect x${_uid}`"
      :multiple="multiple"
      :size="size"
      :placeholder="placeholder"
      :filterable="filterable"
      v-model="val"
      @change="changeValue"
      :popper-class="`xselect x${_uid}`"
      @visible-change="handleVisibleChange">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <i class="tw-designcover"></i>
  </div>
</template>

<script>
import props from './props'

export default {
  name: 'header-navigate',

  props,

  data() {
    return {
      val: ''
    }
  },

  methods: {
    changeValue () {
      this.$emit('input', this.val)
      this.$emit('change', this.val)

      if (this.optionIsLink && this.val) {
        window.open(this.val, '_blank')
      }
    },

    setStyle () {
      const style = `
        .el-select.x${this._uid} .el-input__inner {
          color: ${this.color};
          background-color: ${this.bgColor};
          border-color: ${this.borderColor};
        }

        .el-select.x${this._uid} .el-input .el-select__caret {
          color: ${this.borderColor};
        }

        .el-select-dropdown.el-popper.x${this._uid} {
          background-color: ${this.dropdownBgColor};
          border-color: ${this.dropdownBorderColor};
        }

        .el-select-dropdown.el-popper.x${this._uid}[x-placement^=bottom] .popper__arrow {
          border-bottom-color: ${this.dropdownBorderColor};
        }

        .el-popper.x${this._uid}[x-placement^=bottom] .popper__arrow::after {
          border-bottom-color: ${this.dropdownBgColor};
        }

        .el-popper.x${this._uid} .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
          color: ${this.dropdownItemHoverTextColor};
          background-color: ${this.dropdownItemHoverBg};
        }

        .tw-libselect > .el-select .el-input.is-focus .el-input__inner {
          border-color: ${this.focusBorderColor};
        }
      `

      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/\n/g, '')

      document.head.appendChild(styleEl)
    },

    setValFromDefault () {
      for (const item of this.options) {
        if (item.label === this.default) {
          this.val = this.multiple ? [item.value] : item.value
          break
        }
      }

      this.changeValue()
    },

    init (reset) {
      const initValue = this.value === true ? '' : this.value

      if ([undefined, ''].includes(initValue) || reset) {
        if (this.default) {
          this.setValFromDefault()
        } else if (this.selectedFirst && this.options.length > 0) {
          this.val = this.multiple ? [this.options[0].value] : this.options[0].value
          this.changeValue()
        } else {
          this.val = this.multiple ? [] : ''
          this.changeValue()
        }
      } else {
        this.val = initValue
        this.changeValue()
      }
    }
  },

  computed: {
    style () {
      return {
        color: this.color,
        bgColor: this.bgColor,
        borderColor: this.borderColor,
        dropdownBgColor: this.dropdownBgColor,
        focusBorderColor: this.focusBorderColor,
        dropdownBorderColor: this.dropdownBorderColor,
        dropdownItemHoverBg: this.dropdownItemHoverBg,
        dropdownItemHoverTextColor: this.dropdownItemHoverTextColor
      }
    }
  },

  created () {
    this.init()
  },

  mounted () {
    this.setStyle()
  },

  watch: {
    value () {
      this.val = this.value
    },

    options () {
      this.init()
    },

    default () {
      this.init(true)
    },

    selectedFirst () {
      this.init(true)
    },

    multiple () {
      this.init(true)
    },

    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
